<template>
    <el-dialog v-model="dialogFormVisible" title='查看申请信息' width="600px" align-center draggable>
        <div class="dialog-content">
            <el-form ref="ruleFormRef" :model="formData" label-width="100px">
                <el-form-item label="编号">
                    <el-input v-model="formData.id" disabled />
                </el-form-item>
                <el-form-item label="申请人">
                    <el-input v-model="formData.student_name" disabled />
                </el-form-item>
                <el-form-item label="申请类型">
                    <el-select v-model="formData.bursary_level" placeholder="请选择助学金类别"
                        v-if="formData.type == 'Bursary'">
                        <el-option label="一档助学金(4500元，特困生)" value="一档助学金"></el-option>
                        <el-option label="二档助学金(3000元，困难生)" value="二档助学金"></el-option>
                        <el-option label="三档助学金(2000元，一般困难生)" value="三档助学金"></el-option>
                    </el-select>
                    <el-select v-model="formData.scholar_level" placeholder="请选择助学金等级"
                        v-else-if="formData.type == 'Scholarship'">
                        <el-option label="国家奖学金(10000元)" value="国家奖学金"></el-option>
                        <el-option label="国家励志奖学金(6000元)" value="国家励志奖学金"></el-option>
                        <el-option label="社会奖学金(8000元)" value="社会奖学金"></el-option>
                        <el-option label="一等奖学金(5000元)" value="一等奖学金"></el-option>
                        <el-option label="二等奖学金(3000元)" value="二等奖学金"></el-option>
                        <el-option label="三等奖学金(2000元)" value="三等奖学金"></el-option>
                        <el-option label="鼓励奖(500元)" value="鼓励奖"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="家庭收入" v-if="formData.type == 'Bursary'">
                    <el-input v-model="formData.family_income" />
                </el-form-item>
                <el-form-item label="申请原因">
                    <el-input type="textarea" v-model="formData.reason" />
                </el-form-item>
                <el-form-item label="审核小组意见">
                    <el-input type="textarea" v-model="formData.audit_opinion_a" disabled/>
                </el-form-item>
                <el-form-item label="辅导员意见">
                    <el-input type="textarea" v-model="formData.audit_opinion_b" disabled/>
                </el-form-item>
                <el-form-item label="院领导意见">
                    <el-input type="textarea" v-model="formData.audit_opinion_c" disabled/>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="updateInfo">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, onBeforeUnmount } from 'vue'
import {
    bus
} from "@/utils/mitt.js"
import { updateBursaryApplication,updateScholarshipApplication } from '@/api/apply.js'
import { ElMessage } from 'element-plus'

// 编辑信息
const formData = reactive({
    id: null,
    student_name: '',
    bursary_level: '',
    scholar_level: '',
    family_income: '',
    reason: '',
    fileUrls: [],
    type: '',
    audit_opinion_a: '',
    audit_opinion_b: '',
    audit_opinion_c: '',
})

//回显数据
bus.on('editInfoIdB', async (row: any) => {
    Object.keys(formData).forEach((key) => {
        if (key === 'fileUrls') {
            formData[key] = [];
        } else {
            formData[key] = null;
        }
    });
    formData.type = 'Bursary'
    formData.id = row.id
    formData.student_name = row.student_name
    formData.bursary_level = row.bursary_level
    formData.family_income = row.family_income
    formData.reason = row.reason
    formData.audit_opinion_a = row.audit_opinion_a
    formData.audit_opinion_b = row.audit_opinion_b
    formData.audit_opinion_c = row.audit_opinion_c
})
bus.on('editInfoIdS', async (row: any) => {
    Object.keys(formData).forEach((key) => {
        if (key === 'fileUrls') {
            formData[key] = [];
        } else {
            formData[key] = null;
        }
    });
    formData.type = 'Scholarship'
    formData.id = row.id
    formData.student_name = row.student_name
    formData.scholar_level = row.scholarship_level
    formData.reason = row.reason
    formData.audit_opinion_a = row.audit_opinion_a
    formData.audit_opinion_b = row.audit_opinion_b
    formData.audit_opinion_c = row.audit_opinion_c
})

// 更新信息
const emit = defineEmits(['success'])
const updateInfo = async () => {
    if (formData.type == 'Bursary') {
        const data = {
            id: formData.id,
            bursary_level: formData.bursary_level,
            family_income: formData.family_income,
            reason: formData.reason,
        } 
        const res = await updateBursaryApplication(data)
        if(res.data.status == 0){
            emit('success')
            ElMessage.success(res.data.message)
            dialogFormVisible.value = false
        }else{
            ElMessage.error(res.data.message)
            dialogFormVisible.value = false
        }
        
    } 
    if (formData.type == 'Scholarship') {
        const data = {
            id: formData.id,
            scholarship_level: formData.scholar_level,
            reason: formData.reason,
        } 
        const res = await updateScholarshipApplication(data)
        if(res.data.status == 0){
            emit('success')
            ElMessage.success(res.data.message)
            dialogFormVisible.value = false 
        }else{
            ElMessage.error(res.data.message)
            dialogFormVisible.value = false
        }
    }
}
// 弹窗开关
const dialogFormVisible = ref(false)

// 打开弹窗
const open = () => {
    dialogFormVisible.value = true
}

defineExpose({
    open
})

onBeforeUnmount(() => {
    bus.all.clear()
})
</script>

<style lang="scss" scoped>
.dialog-content {
    display: flex;
    padding: 20px 30px;
}

:deep(.el-form-item) {
    margin: 30px;
}

.file-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
</style>